import React, { FC, memo } from "react";
import { NavLink } from "react-router-dom";
import {
  HeaderLeft,
  HeaderRight,
  HeaderWrapper
} from "@/components/app-header/style";
import headerTitles from "@/assets/data/header_titles.json";
import {Input} from "antd";
import {SearchOutlined} from "@ant-design/icons";

interface IProps {
  children?: React.ReactNode;
}

const AppHeader: FC<IProps> = () => {
  /**
   * 根据不同 nav item 类型，返回不同的组件
   * @param item
   */
  function showItem(item: any) {
    if (item.type === "path") {
      return (
        <NavLink
          to={item.link}
          className={({ isActive }) => {
            {/* isActive 和 active 都是 NavLink 默认的变量和类 写法来源：react-router 官网 */}
            return isActive ? "active" : undefined;
          }}
        >
          {item.title}
          <i className="icon sprite_01"></i>
        </NavLink>
      );
    } else {
      return (
        <a href={item.link} target="_blank" rel="noreferrer">
          {item.title}
        </a>
      );
    }
  }

  return (
    <HeaderWrapper>
      <div className={"content wrap-v1"}>
        <HeaderLeft>
          <a className="logo sprite_01" href="/">
            网易云音乐
          </a>
          <div className="title-list">
            {headerTitles.map((item) => {
              return (
                <div className="item active" key={item.title}>
                  {showItem(item)}
                </div>
              );
            })}
          </div>
        </HeaderLeft>
        <HeaderRight>
          <span className="input">
            <Input
              className="search"
              placeholder="音乐/视频/电台/用户"
              prefix={<SearchOutlined />}
            />
          </span>
          <span className="center">创作者中心</span>
          <span className="login">登录</span>
        </HeaderRight>
      </div>
      <div className="divider"></div>
    </HeaderWrapper>
  );
};

export default memo(AppHeader);
